<template>
  <div>
    <el-row>
      <el-col :span="20" offset="2">
        <div>
          <div
            style="
              width: 255px;
              height: 73px;
              position: absolute;
              left: 577px;
              font-size: 30px;
            "
          >
            优品选购
          </div>
          <img
            src="https://static.360buyimg.com/mtd/pc/fresh_athena2x/1.0.0/static/images/mod_title_bg.png"
          />
        </div>
      </el-col>
    </el-row>

    <!-- 类别选项卡 -->
    <el-row>
      <el-col :span="20" offset="2">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="生态果蔬" name="1">
            <el-row>
              <el-col :span="5" offset="1" class="colimg"  v-for="(goods,index) in goodsList" :key="index">
                <!-- <img
                  class="mainimg"
                  src="https://img11.360buyimg.com/babel/s360x360_jfs/t3049/326/4875061308/594623/37c45385/585a2bb3N7e2b13a0.jpg!q80.webp"
                /> -->
                <img class="mainimg" :src="require(`./upload/${goods.cover}.jpg`)"/>
                <div style="line-height: 10px">{{goods.name}}|{{goods.spec}}</div>
                <div style="line-height: 30px">
                  <span style="color: red">￥{{goods.price}}</span>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="肉禽蛋奶" name="2">
            <el-row>
              <el-col :span="5" offset="1" class="colimg"  v-for="(goods,index) in goodsList" :key="index">
                <!-- <img
                  class="mainimg"
                  src="https://img11.360buyimg.com/babel/s360x360_jfs/t3049/326/4875061308/594623/37c45385/585a2bb3N7e2b13a0.jpg!q80.webp"
                /> -->
                <img class="mainimg" :src="require(`./upload/${goods.cover}.jpg`)"/>
                <div style="line-height: 10px">{{goods.name}}|{{goods.spec}}</div>
                <div style="line-height: 30px">
                  <span style="color: red">￥{{goods.price}}</span>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="米面粮油" name="3">
            <el-row>
              <el-col :span="5" offset="1" class="colimg"  v-for="(goods,index) in goodsList" :key="index">
                <!-- <img
                  class="mainimg"
                  src="https://img11.360buyimg.com/babel/s360x360_jfs/t3049/326/4875061308/594623/37c45385/585a2bb3N7e2b13a0.jpg!q80.webp"
                /> -->
                <img class="mainimg" :src="require(`./upload/${goods.cover}.jpg`)"/>
                <div style="line-height: 10px">{{goods.name}}|{{goods.spec}}</div>
                <div style="line-height: 30px">
                  <span style="color: red">￥{{goods.price}}</span>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="休闲零食" name="4">
            <el-row>
              <el-col :span="5" offset="1" class="colimg"  v-for="(goods,index) in goodsList" :key="index">
                <img
                  class="mainimg"
                  src="https://img11.360buyimg.com/babel/s360x360_jfs/t3049/326/4875061308/594623/37c45385/585a2bb3N7e2b13a0.jpg!q80.webp"
                />
                <!-- <img class="mainimg" :src="require(`./upload/${goods.cover}.jpg`)"/> -->
                <div style="line-height: 10px">{{goods.name}}|{{goods.spec}}</div>
                <div style="line-height: 30px">
                  <span style="color: red">￥{{goods.price}}</span>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  created() {
    this.getGoodsListById()
  },
  data() {
    return {
      activeName: "1",
      goodsList: [],
    };
  },
  methods: {
    handleClick() {
      console.log(this.activeName);
      this.getGoodsListById()
    },
    getGoodsListById() {
      //发送ajax获取商品数据
      this.axios
        .get("http://localhost:8080/goods/goodsList/" + this.activeName)
        .then((res) => {
          console.log(res.data.data);
          this.goodsList = res.data.data;
        });
    },
    
  },
};
</script>

<style>
.mainimg {
  width: 200px;
  height: 230px;
}
.colimg {
  line-height: 60px;
}
</style>